<template>
    <Layout>
        <Form ref="form1" :model="dataToQuery" :label-width="120">
            <Row class="query-form">
                <Col span="8">
                    <FormItem label="配置角色：" prop="order">
                        <Input class='query-form-el' placeholder="请填写配置角色" type='text'
                               v-model='dataToQuery.roleName'></Input>
                    </FormItem>
                </Col>
                <Col span="8" offset="8">
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" @on-selection-change='getSelectRows'
               :loading='pageStatus.loading'
               border :columns="columns1" :data="dataTable">
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24">
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize"
                      @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
                      show-total show-sizer show-elevator/>
            </Col>
        </Row>
        <Modal :title="this.getModalTitle('人员变更角色配置')" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow" :width=850 :styles="{height:'400px'}" class-name='limit-height-dialog'>
            <Row>
                <Col span="24">
                    <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':''" :show-message="false" :model="dataToView" :rules="mode === 'view'?{}:ruleCustom" :label-width="mode === 'view'?160:null" :label-position="mode === 'view'?'right':'top'">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='配置角色：' prop='roleId'>
                                    <div v-if="mode === 'view'">{{ dataToView.roleName }}</div>
                                    <Select v-model='dataToView.roleId' class='query-form-el' placeholder="请选择配置角色" v-else>
                                        <Option v-for="item in dictMap.roles.filter(m=>!roleIds.includes(m.id)||(mode === 'edit'&&m.id===dataToView.roleId))" :value="item.id" :key="item.id">{{item.name }}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='审批人角色：' prop='applyRoleId'>
                                    <div v-if="mode === 'view'">{{ dataToView.applyRoleName }}</div>
                                    <Select v-model='dataToView.applyRoleId' class='query-form-el' placeholder="请选择审批人角色" clearable v-else>
                                        <Option v-for="item in dictMap.roles" :value="item.id" :key="item.id">{{item.name }}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                        </Row>

                        <!--<Row type="flex" justify="space-around" class="code-row-bg" v-if="!dataToView.applyRoleId">-->
                            <!--<Col span="23">-->
                                <!--<Alert type="warning">审批角色和审批人员不能共存</Alert>-->
                                <!--<FormItem label='审批人员：' prop='applyUserIds'>-->
                                    <!--<div v-if="mode === 'view'">{{dataToView.applyUserNames}}</div>-->
                                    <!--<Input v-model="dataToView.applyUserNames" type="textarea" v-else-->
                                           <!--:autosize="{minRows:1,maxRows:5}"-->
                                           <!--placeholder="请选择" readonly @click.native="examinerUserSelect"/>-->
                                    <!--<userDom :isButton="true" ref="userDom" :placeholderStr="'考试人员'"-->
                                             <!--:selectData='setCurrentUserName'-->
                                             <!--:singleChoice=false :ifUser="true"-->
                                             <!--@setData='examinerUserSave'></userDom>-->
                                <!--</FormItem>-->
                            <!--</Col>-->
                        <!--</Row>-->

                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='填报人：' prop='createUserName'>
                                    <div v-if="mode === 'view'">{{ dataToView.createUserName }}</div>
                                    <Input v-else class='query-form-el' placeholder="请填写填报人" type='text'
                                           readonly v-model='dataToView.createUserName'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='填报时间：' prop='createDate'>
                                    <div v-if="mode === 'view'">{{ renderViewDate(dataToView.createDate) }}</div>
                                    <DatePicker v-else class="query-form-el" placeholder="请选择填报时间"
                                                readonly v-model='dataToView.createDate'></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>

                    </Form>
                </Col>
            </Row>
            <div slot="footer">
                <Button v-if="mode != 'view'" type="primary" class='ivu-btn-save' @click="submit('dialogForm')">确定
                </Button>
                <Button v-if="mode != 'view'" type="primary" class='ivu-btn-cancel' @click="handleCancel">取消</Button>
                <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
            </div>
        </Modal>

    </Layout>
</template>

<script>
    import {Api} from '@/api/index.js'
    import {formatDate} from '@/tools/index'
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    import {sessionStorage, cookie} from '@/common/cacheUtils.js';
    import userDom from "@/components/input-user.vue";

    export default {
        components: {userDom},
        data() {
            return {
                ...this.createCommonDataField(),
                imgUrl: "",
                columns1: [
                    {title: '序号', width: 70, fixed: 'left', align: 'center', render: this.indexColumnsRender},
                    { key:'roleName',title: '配置角色',  align: 'center', minWidth: 120, tooltip:true},
                    { key:'applyRoleName',title: '审批人角色',  align: 'center', minWidth: 120, tooltip:true},
                    // {key: 'applyUserNames', title: '审批人员', align: 'center', minWidth: 120,tooltip:true},
                    this.getActionColumns(),
                ],
                ruleCustom: {
                    roleId: [ { required: true, message: '请选择配置角色', trigger: 'change',}],
                },
                tableHeight: 10,
                dictMap: {
                    roles:[]
                },
                // api
                queryUrl: Api.queryUserRoleConfigure,
                deleteUrl: Api.deleteUserRoleConfigure,
                updateUrl: Api.updateUserRoleConfigure,
                saveUrl: Api.saveUserRoleConfigure,
                currentUser: JSON.parse(sessionStorage('userId').get('userId')),

                setCurrentUserName:null,
                roleIds:[]
            }
        },
        async mounted() {
            this.setTableHeight();
            this.selectAllRole()
            this.query();
        },
        methods: {
            ...pageCommonFunction,
            examinerUserSelect() {
                if (this.dataToView.applyUserIds) {
                    this.setCurrentUserName = []
                    let userIds = this.dataToView.applyUserIds.split(',')
                    let names = this.dataToView.applyUserNames.split(',')
                    for (let k in userIds) {
                        this.setCurrentUserName.push({userId: userIds[k], name: names[k]})
                    }
                    this.$nextTick(() => {
                        this.$refs.userDom.setCurrentInfo();
                    })
                }
                this.$refs.userDom.openOrgModal();
            },
            examinerUserSave(data) {
                if (data.length > 0) {
                    let userIds = []
                    let userNames = []
                    data.forEach(v => {
                        userIds.push(v.userId);
                        userNames.push(v.name)
                    });
                    this.$nextTick(() => {
                        this.$set(this.dataToView, 'applyUserIds', userIds.join(','))
                        this.$set(this.dataToView, 'applyUserNames', userNames.join(','))
                    })
                }
            },
            selectAllRole(){
                let data = {
                    fromPage:1,
                    pageSize:500,
                    roleType:'1'
                }
                this.$http.get(Api.queryRole,{params:data}).then(res =>{
                    this.dictMap.roles = res.data.data;
                })
            },
            deleteData(params) {
                this.deleteDateAjax(params);
            },
            query() {
                this.pageStatus.loading = true
                let data = {
                    startPage: this.pagedata.currentPage,
                    size: this.pagedata.pageSize,
                    conditions: this.dataToQuery
                };

                this.$http.post(this.queryUrl, data).then((res) => {
                    if (res.data.status === 201) {
                        this.$Message.error(res.data.msg);
                    }
                    this.dataTable = res.data.data.data;
                    this.roleIds = res.data.data.roleIds;
                    this.pagedata.total = res.data.data.totalSize;
                    this.pageStatus.loading = false
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                    this.pageStatus.loading = false
                })
            },

            submit(name) {
                this.submitAjax(name);
            },
            createEmptyDataToAdd() {
                return {
                    createDate: new Date(),
                    createUserId: this.currentUser.userId,
                    createUserName:this.currentUser.userName,
                    id:this.get_uuid(),
                }
            },
            // async afterDataToViewInit() {
            //     await this.getFiles('id');
            // },
        },
        watch: {
            'dataToView.applyRoleId':function () {
                if (this.dataToView.applyRoleId) {
                    this.$set(this.dataToView,'applyUserIds',null)
                    this.$set(this.dataToView,'applyUserNames',null)
                }
            }
        },
    }
</script>

<style lang='css' scoped>
    .ivu-form-item {
        padding-right: 20px;
    }

    .query-form-el, .ivu-date-picker, .ivu-input-wrapper {
        width: 100%;
    }

</style>

